<%@page import="com.windfone.common.Constant"%>
<%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%>
<%@ include file="head.jsp" %>
<%@ taglib uri="/WEB-INF/recommend.tld" prefix="windfone" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>风驰电讯  您最贴心的手机顾问  购物车 </title>
<%@ include file="headkey.jsp" %>
<script src='js/numberUtil.js'></script>
<script src="js/jquery-1.4.2.js"></script>
<script>
	function updateTatal(){
		var table = document.getElementById("goodsList");
		var total =0;
		for(var i=0;i<table.rows.length;i++){
			var row = table.rows[i];
			var index=row.id.indexOf("goods");
			if( index != -1){
				var suffix = row.id.substring("goods".length,row.id.length);
				var divNode = document.getElementById("labelJifen"+suffix);
				var textnode = divNode.firstChild;
				total= total +  parseInt(textnode.nodeValue);
			}
		}
		document.getElementById("totalJifen").innerHTML=total;
		document.getElementById("totalMoeny").innerHTML="¥"+total;
	}
	
	function changeCount(seqTime,rowNumber,price){
		var totalNumber = document.getElementById("totalNumber"+rowNumber);
		var   re=/^([1-9])|([1-4]\d)|50$/; 
	    if  ( re.test(totalNumber.value)){ 
			var totalPrice= price * totalNumber.value;
			document.getElementById("lablePrice"+rowNumber).innerHTML="¥"+totalPrice;
			document.getElementById("labelJifen"+rowNumber).innerHTML=totalPrice;	
			updateTatal();
			 $.ajax({
		        	type: "POST",
		         	url: "changeCount.action",
		         	data:{"seqTime":seqTime,"orderNumber":totalNumber.value}, 
		         	success: function(msg){
		         	}   
		      	});
	    }
	}
	function delGoods(seqTime,goodstype,tableRowId){
		var row= document.getElementById("goods"+tableRowId);
		var table=row.parentNode;
		table.removeChild(row);
		updateTatal();
		$.ajax({
        	type: "POST",
         	url: "delGoods.action",
         	data:{"seqTime":seqTime}, 
         	success: function(msg){
         	}   
      	});
	}
	function clearCar(){
		if (confirm("确定要清除购物车吗？")){
	        $.ajax({
	        	type: "POST",
	         	url: "clearCar.action",
	         	success: function(msg){
		        	var data = eval(msg);
		        	if (data){
		        		var table = document.getElementById("goodsList");
		        		for(var i=0;i<table.rows.length;i++){
		        			var row = table.rows[i];
		        			var index=row.id.indexOf("goods");
		        			if( index != -1){
			        			row.parentNode.removeChild(row);
		        			}
		        		}
		        		document.getElementById("totalJifen").innerHTML="";
		        		document.getElementById("totalMoeny").innerHTML="";
		        	}
	         	}   
	      	});
		}
	}
</script>
<link href="css/css.css" rel="stylesheet" type="text/css" />
</head>

<body id="pages9">

<!--头部--> 
<%@ include file="navigate.jsp"%>
<!--内容-->
<div class="contentBox"><!--左区-->
<div class="col2" style="width:990px">
	<div class="tabLeBoxB" style=" padding-top:0">
		<div class="title"><h3>购物车</h3></div>
		<div class="borderBox">
				<div><img src="images/sopping1.gif" width="934" height="81" /></div>
				<table id="goodsList" class="spc">
					<tr>
							  <th style="width: 60px;">商品类别</th>
							  <th style="width: 75px;">商品图片</th>
							  <th style="width: 200px;">商品名称（属性）</th>
							  <th style="width: 270px;">标准配置</th>
							  <th style="width: 80px;">商品价格</th>
							  <th style="width: 60px;">赠送积分</th>
							  <th style="width: 70px;">商品数量</th>
							  <th style="width: 70px;">操作</th>
					</tr>
					<c:forEach var="mobile" items="${orderList}" varStatus="status">  	 		  
					<tr id="goods${status.index}">
							  <td class="c">
							  	<c:if test="${goodstype == 0 }">手机</c:if>
							  	<c:if test="${goodstype == 1 }">配件</c:if>
							  </td>
							  <td class="c">
							    <a target="_blank" href="detailmobile.action?productId=${mobile.productId }"><img style="width: 70px; height: 90px;" src="<%=contextPath%>/${mobile.imagepath}"/>
							    </a>
							  </td>
							  <td class="c">${mobile.name }<br/><c:if test="${ mobile.colorName != null }">（${ mobile.colorName }）</c:if></td>
							  <td class="c"><c:if test="${ mobile.colorName != null }">（${ mobile.colorName }）</c:if></td>
							  
							  <td class="c cm"><div   id="lablePrice${status.index}">¥${mobile.price * mobile.orderNumber }</div></td>
							  <td class="c cp"><div   id="labelJifen${status.index}">${mobile.price * mobile.orderNumber}</div></td>
							  <c:set var="total" value="${total+ (mobile.price * mobile.orderNumber)}"/>
							  <td class="c">
							    <div>
							       <input id="totalNumber${status.index}"  name="totalNumber${status.index}" value="${mobile.orderNumber }"  maxlength="4" style="width: 36px; text-align: center;" type="text"/>
							    </div>
							    <div style="padding-top: 3px;">
							      <a title="保存数量" href="#">
							       <img   src="images/sc_img19.png" onclick="changeCount(${mobile.timeSeq},${status.index},${mobile.price })" />
							      </a>
							    </div>
							  </td>
							  <td class="c">
							    <a href="javascript:delGoods(${mobile.timeSeq},${mobile.goodstype },${status.index})"><img alt="" src="images/sc_img15.png" id="img"/></a>
							  </td>
					</tr>
					</c:forEach>	
					<tr>
							<td colspan="8" class="split"></td>
					</tr>
						
					 <c:if test="${ orderList==null || fn:length(orderList)==0 }">
					<tr>
						<td class="f" colspan="8"><a href="mobileCenter.action"><font size='5' color='black'>您的购物车中无任何商品，您可以：如果您还未登录，可能导致购物车中无商品，请 马上登录马上去 选择商品</font></a></td>
					</tr>
					</c:if>	 
					<c:if test="${  fn:length(orderList)>0 }">
					<tr>
							<td colspan="8" class="f">
								<dl>
									<dd>本次购物您将获得：<span class="p" id="totalJifen">${ total }</span> 积分</dd>
									<dd class="m">合计总价（不包含运费）：<span class="p1" id="totalMoeny">${total }</span> 元</dd>
									<dd class="o">
										<a href="#" onclick="clearCar()">
											<img alt="清空购物车" src="images/sc_img8.png" id="imgClear"/>
										</a>
										<%--
										<a href="mobileCenter.action"><img src="images/o2_img9.png"  alt="继续购物" 	width="93" height="23" /></a>						
										 --%>
										<a href="buyOrder.action">
											<img alt="我要购买" src="images/sc_img9.png" id="imgBuy"/>
										</a>
									</dd>
									<dd class="floatend"></dd>
								</dl>
							</td>
					</tr>
					</c:if>
						
				</table>
		  		<div class="clear"></div>
		</div>
	</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
   <%@ include file="bottom.jsp" %>
</body>
</html>

